<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="UTF-8">
    <title>书籍管理</title>
</head>

<body class="no-skin">

<!--导航部分-->
<div th:replace="_fragment :: nav"></div>

<!--页面主体-->
<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <!--侧边栏-->
    <div th:replace="_fragment :: menu(3,3.1)"></div>

    <!--主页中心部分-->
    <div class="main-content" >

        <!--面包屑-->
        <div class="breadcrumbs" id="breadcrumbs">
            <script type="text/javascript">
                try {
                    ace.settings.check('breadcrumbs', 'fixed')
                } catch (e) {
                }
            </script>

            <!--多级导航-->
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a th:href="@{/admin/toIndex}">首页</a>
                </li>
                <li class="active">书籍列表</li>
            </ul><!-- /.breadcrumb -->
        </div>

        <!--中心内容	-->
        <div class="page-content">

            <div class="page-content-area">

                <div class="row">
                    <div class="col-xs-12">
                        <!-- 页面内容开始 -->

                        <!--内容	-->
                        <div class="row">
                            <div class="col-xs-12">
                                <h3 class="header smaller lighter blue">书籍列表</h3>
                                <div class="table-header lighter">
                                    》
                                </div>
                                <div>
                                    <div id="sample-table-2_wrapper" class="dataTables_wrapper form-inline" role="grid">
                                        <table id="sample-table-2"
                                               class="mdui-table mdui-table-selectable mdui-table-hoverable"
                                               aria-describedby="sample-table-2_info">
                                            <!--表格头-->
                                            <thead>
                                            <tr>
                                                <th class="mdui-table-col-numeric sorting_disabled" role="columnheader" tabindex="0"
                                                    aria-controls="sample-table-2" rowspan="1" colspan="1"
                                                    aria-label="Domain: activate to sort column ascending">书名
                                                </th>
                                                <th class="mdui-table-col-numeric sorting_disabled" role="columnheader" tabindex="0"
                                                    aria-controls="sample-table-2" rowspan="1" colspan="1"
                                                    aria-label="Price: activate to sort column ascending">作者
                                                </th>
                                                <th class="mdui-table-col-numeric sorting_disabled" role="columnheader" tabindex="0"
                                                    aria-controls="sample-table-2" rowspan="1" colspan="1"
                                                    aria-label="Clicks: activate to sort column ascending">价格
                                                </th>
                                                <th class="mdui-table-col-numeric sorting_disabled" role="columnheader" tabindex="0"
                                                    aria-controls="sample-table-2" rowspan="1" colspan="1"
                                                    aria-label="Clicks: activate to sort column ascending">小图
                                                </th>
                                                
                                                <th class="mdui-table-col-numeric sorting_disabled" role="columnheader" rowspan="1" colspan="1"
                                                    aria-label="">
                                                    <a href="#" th:href="@{/admin/toSaveBook}" class="btn btn-success btn-xs">新增</a>
                                                </th>
                                            </tr>
                                            </thead>

                                            <tbody role="alert" aria-live="polite" aria-relevant="all">
                                                <tr class="" th:each="book,stat : ${iPage.records}" >

                                                    <td class="" style="vertical-align: middle;" th:text="${book.name}">
                                                    </td>
                                                    <td class="" style="vertical-align: middle;" th:text="${book.author}">$45</td>
                                                    <td class="" style="vertical-align: middle;" th:text="${book.priceStr}">3,330</td>
                                                    <td class="" style="vertical-align: middle;"><img th:src="@{${book.icon}}" style="width: 40px;height: 40px;" alt=""></td>

                                                    <td class="" style="vertical-align: middle;">
                                                        <div class="hidden-sm hidden-xs action-buttons">
                                                            <a class="blue" href="#" th:href="@{/admin/queryBookDetail/{id}(id=${book.id})}">
                                                                <i class="ace-icon fa fa-search-plus bigger-130"></i>
                                                            </a>

                                                            <a class="green" href="#" th:href="@{/admin/toUpdateBook/{id}(id=${book.id})}">
                                                                <i class="ace-icon fa fa-pencil bigger-130"></i>
                                                            </a>

                                                            <!--th:href="@{/admin/deleteUser/{id}(id=${user.id})}"-->
                                                            <a class="red" href="#" th:onclick="|javascript:del('${book.id}')|">
                                                                <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                                            </a>

                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <!--分页条-->
                                        <div class="row mdui-table">
                                            <div class="col-xs-6">
                                                <div class="dataTables_info" id="sample-table-2_info">
                                                    总条数:&nbsp;[[${iPage.total}]]&nbsp;条
                                                </div>
                                            </div>
                                            <div class="col-xs-6">
                                                <div class="dataTables_paginate paging_bootstrap">
                                                    <ul class="pagination" id="page-content">
<!--                                                        &lt;!&ndash;&lt;!&ndash;首页&ndash;&gt;-->
<!--                                                        <li class="prev" th:classappend="${iPage.current == 1 ? 'disabled' : ''}">-->
<!--                                                            <a href="#" th:href="@{/admin/toBook(p=1,s=${iPage.size})}">-->
<!--                                                                <i class="fa fa-angle-double-left"></i>-->
<!--                                                            </a>-->
<!--                                                        </li>-->
<!--                                                        &lt;!&ndash;上一页&ndash;&gt;-->
<!--                                                        <li class="prev" th:classappend="${iPage.current == 1 ? 'disabled' : ''}">-->
<!--                                                            <a href="#" th:href="@{/admin/toBook(p=${iPage.current}-1,s=${iPage.size})}">-->
<!--                                                                <i class="fa fa-angle-left"></i>-->
<!--                                                            </a>-->
<!--                                                        </li>-->
<!--                                                        &lt;!&ndash;页码&ndash;&gt;-->
<!--                                                        <li class="" th:each="i:${#numbers.sequence(1,iPage.pages)}" th:classappend="${iPage.current == i ? 'active':''}">-->
<!--                                                            <a href="#" th:href="@{/admin/toBook(p=${i},s=${iPage.size})}" th:text="${i}">1</a>-->
<!--                                                        </li>-->
<!--                                                        &lt;!&ndash;下一页&ndash;&gt;-->
<!--                                                        <li class="next" th:classappend="${iPage.current == iPage.pages ? 'disabled' : ''}">-->
<!--                                                            <a href="#" th:href="@{/admin/toBook(p=${iPage.current == iPage.pages ? iPage.pages : iPage.current+1},s=${iPage.size})}">-->
<!--                                                                <i class="fa fa-angle-right"></i>-->
<!--                                                            </a>-->
<!--                                                        </li>-->
<!--                                                        &lt;!&ndash;尾页&ndash;&gt;-->
<!--                                                        <li class="next" th:classappend="${iPage.current == iPage.pages ? 'disabled' : ''}">-->
<!--                                                            <a href="#" th:href="@{/admin/toBook(p=${iPage.pages},s=${iPage.size})}">-->
<!--                                                                <i class="fa fa-angle-double-right"></i>-->
<!--                                                            </a>-->
<!--                                                        </li>-->
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content-area -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->

    <!--页脚	-->
    <div th:replace="_fragment::footer"></div>

    <!--回到顶部-->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<!--引入js	-->
<th:block th:replace="_fragment::script"></th:block>

<script type="text/javascript" th:inline="javascript">
    function del(id) {
        bootbox.confirm("你确定要删除该书籍？",function (res) {
            if(res){
                window.location.href="/admin/deleteBook/"+id;
            }
        })
    }
    /*<![CDATA[*/
    window.onload = function () {
        var iPage = [[${iPage}]];
        var totalPage = iPage.pages;      //总页数
        var currentPage = iPage.current;    //当前页
        var size = iPage.size;          //每页条数
        var beginNum;   //分页条第一页
        var endNum;     //分页条最后一页

        //处理 beginNum 和 endNum
        if(totalPage<10){   //如果总页数小于10页,全部显示
            beginNum=1;
            endNum=totalPage;
        }else{  //如果总页数大于等于10页
            beginNum=currentPage-5;
            endNum=currentPage+4;
            if(beginNum<1){  //currentPage-5可能会是一个小于等于0的数，也就是用户在浏览1,2,3,4,5页时的情况
                beginNum=1;     //纠正回来
                endNum=beginNum+9;
            }if(endNum>totalPage){   //用户在浏览倒数1,2,3,4页时的情况
                endNum=totalPage;//纠正回来，让分页条最后一个数字为总的页数
                beginNum=endNum-9;
            }
        }

        var pageContent = '';

        //首页
        pageContent += '<li class="prev" >\n' +
            '                 <a href="/admin/toBook?p=1&s='+size+'">\n' +
            '                       <i class="fa fa-angle-double-left"></i>\n' +
            '                 </a>\n' +
            '           </li>';

        //上一页
        var preNum = 1;
        if(currentPage == 1){
            preNum = 1;
        }else{
            preNum = currentPage - 1;
        }
        pageContent += '<li class="prev">\n' +
            '                 <a href="/admin/toBook?p='+(preNum)+'&s='+size+'">\n' +
            '                       <i class="fa fa-angle-left"></i>\n' +
            '                 </a>\n' +
            '           </li>';

        // 页码
        for(var i = beginNum; i <= endNum; i++){
            var item = '';
            if(i == iPage.current){
                item = '<li class="active" >\n' +
                    '                <a href="/admin/toBook?p='+i+'&s='+size+'" >'+i+'</a>\n' +
                    '            </li>';
            }else{
                item = '<li class="" >\n' +
                    '                <a href="/admin/toBook?p='+i+'&s='+size+'" >'+i+'</a>\n' +
                    '            </li>';
            }
            pageContent += item;
        }

        //下一页
        var nextNum = totalPage;
        if(currentPage == totalPage){
            nextNum = totalPage;
        }else{
            nextNum = currentPage + 1;
        }
        pageContent += '<li class="next">\n' +
            '               <a href="/admin/toBook?p='+nextNum+'&s='+size+'">\n' +
            '                   <i class="fa fa-angle-right"></i>\n' +
            '               </a>\n' +
            '           </li>';

        //尾页
        pageContent += '<li class="next">\n' +
            '               <a href="/admin/toBook?p='+totalPage+'&s='+size+'">\n' +
            '                   <i class="fa fa-angle-double-right"></i>\n' +
            '               </a>\n' +
            '           </li>';

        $("#page-content").html(pageContent);
    }

    /*]]>*/

</script>

</body>
</html>
